<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo">
                <img src="@/assets/logo.png"/>
            </el-col>
            <el-col :span="14" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner">
                        <img src="https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png"/> {{oauthUser.loginName}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="modifyPasswordFormVisible = true">修改密码</el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-col>
        <el-col :span="24" class="main">
            <aside>
                <!--导航菜单-->
                <el-menu :default-active="$route.path" unique-opened router>
                    <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden && oauth(item.roles)">
                        <el-submenu :index="index+''" v-if="!item.leaf">
                            <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
                            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden && oauth(child.roles)">{{child.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
                    </template>
                </el-menu>
            </aside>
            <section class="content-container">
                <div class="grid-content bg-purple-light">
                    <el-col :span="24" class="breadcrumb-container">
                        <strong class="title">{{$route.name}}</strong>
                        <el-breadcrumb separator="/" class="breadcrumb-inner">
                            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                                {{ item.name }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <el-col :span="24" class="content-wrapper">
                        <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </el-col>
                </div>
            </section>
        </el-col>
        <el-dialog title="修改登录密码" :visible.sync="modifyPasswordFormVisible">
            <el-form :model="modifyPasswordForm" label-width="120px" :rules="modifyPasswordFormRules" ref="modifyPasswordForm">
                <el-form-item label="旧的登录密码" prop="oldPassword">
                    <el-input type="password" v-model="modifyPasswordForm.oldPassword" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新的登录密码" prop="newPassword">
                    <el-input type="password" v-model="modifyPasswordForm.newPassword" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="modifyPasswordForm.confirmPassword" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyPasswordFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitModifyPassword">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
    import auth from "@/mixins/auth";

    export default {
        mixins: [auth],
        data() {
            return {
                modifyPasswordFormVisible: false,
                modifyPasswordForm: {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                },
                modifyPasswordFormRules: {
                    oldPassword: [
                        {required: true, message: '请输旧的登录密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输新的登录密码', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请输确认密码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            submitModifyPassword: function () {
                let _this = this;
                this.$refs.modifyPasswordForm.validate((valid) => {
                    if (valid) {
                        this.httpPostRequest("/modifyPassword", _this.modifyPasswordForm, function (data) {
                            _this.modifyPasswordFormVisible = false;
                            _this.modifyPasswordForm = {
                                oldPassword: '',
                                newPassword: '',
                                confirmPassword: '',
                            };
                            _this.$message({
                                message: "修改密码成功，下次请使用新的密码登录",
                                type: "success"
                            });
                        });
                    }
                });
            },
            logout: function () {
                let _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.httpPostRequest("/logout", {}, function (data) {
                        _this.removeAuth();
                        _this.$router.push('/login');
                    });
                }).catch(() => {

                });
            }
        },
        computed: {
            oauthUser: function () {
                return this.getOauthUser();
            }
        },
    }

</script>

<style scoped>
    .container {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
    }

    .container .header {
        height: 60px;
        line-height: 60px;
        background: #20a0ff;
        color: #fff;
    }

    .container .header .logo {
        width: 230px;
        height: 60px;
        font-size: 22px;
        padding-left: 20px;
        padding-right: 20px;
        border-color: rgba(238, 241, 146, 0.3);
        border-right-width: 1px;
        border-right-style: solid;
    }

    .container .header .logo img {
        height: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
    }

    .container .header .userinfo {
        text-align: right;
        padding-right: 35px;
        float: right;
    }

    .container .header .userinfo .userinfo-inner {
        cursor: pointer;
        color: #fff;
    }

    .container .header .userinfo .userinfo-inner img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 10px 0px 10px 10px;
        float: right;
    }

    .container .main {
        display: flex;
        position: absolute;
        top: 60px;
        bottom: 0px;
        overflow: hidden;
    }

    .container .main aside {
        flex: 0 0 230px;
        width: 230px;
    }

    .container .main aside .el-menu {
        height: 100%;
    }

    .content-container {
        flex: 1;
        overflow-y: scroll;
        padding: 20px;
    }

    .content-container .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
    }

    .content-container .content-wrapper .title {
        width: 200px;
        float: left;
        color: #475669;
    }

    .breadcrumb-inner {
        float: right;
    }

</style>
